<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="app-container calendar-list-container">
    <el-row>
         <el-radio-group v-model="radioType" @change="switchTable">
            <el-radio-button label="now">当前报警</el-radio-button>
            <el-radio-button label="fault">故障处理记录</el-radio-button>
        </el-radio-group>
        <div class="search">
          <span >报警类型</span>
          <el-select v-model="listQuery.alrmType" filterable placeholder="请选择" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item,index) in alrmTypeList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
            <span style="margin-left: 20px;">报警时间</span>
          <el-date-picker v-model="listQuery.dateStrs" value-format="yyyy-MM-dd" type="daterange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px;" :picker-options="pickerOptions" size="mini"></el-date-picker>
         <el-button class="filter-item" type="primary" :disabled="isadvance" @click="handleFilter" size="mini">查询</el-button>
         <el-popover
          placement="bottom"
          width="400"
          v-model="isadvance"
          trigger="click">
         <el-button class="filter-item" slot="reference" @click.stop="isadvance=true" type="text" size="mini">高级查询</el-button>
         <div class="advancequery">
             <el-form :model="formLabelAlign" ref="searchForm" :rules="advancerules" label-width="100px" label-position="top" @submit.native.prevent>
                <el-form-item label="消防栓名称" prop="hydrantName">
                <el-select v-model="formLabelAlign.hydrantName" placeholder="全部" style="width: 100%;">
                        <el-option v-for="(item,index) in fireHydrantList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="系列" prop="equipmentType">
                    <el-select v-model="formLabelAlign.equipmentType" filterable placeholder="全部" style="width: 100%;">
                        <el-option v-for="(item,index) in series" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="设备编号" prop="sensorNo">
                    <el-input v-model="formLabelAlign.sensorNo"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdvaceSerach('searchForm')" size="mini" native-type="submit">查询</el-button>
                    <el-button @click="resetForm('searchForm')" type="text">取消</el-button>
                </el-form-item>
            </el-form>
          </div>
        </el-popover>
       </div>
        <el-table :data="list" :key="tableKey"  v-loading.body="listLoading" style="width: 100%;">
            <el-table-column label="消防栓名称">
                <template slot-scope="scope">
                    <span>{{scope.row.hydrantName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="设备编号">
                <template slot-scope="scope">
                    <span>{{scope.row.sensorNo}}</span>
                </template>
            </el-table-column>
            <el-table-column label="系列">
                <template slot-scope="scope">
                    <span>{{scope.row.equipmentType}}</span>
                </template>
            </el-table-column>
            <el-table-column label="位置描述">
                <template slot-scope="scope">
                    <span>{{scope.row.positionDescription}}</span>
                </template>
            </el-table-column>
            <el-table-column label="测点">
                <template slot-scope="scope">
                    <span>{{scope.row.measuringPoint}}</span>
                </template>
            </el-table-column>
            <el-table-column label="报警类型">
                <template slot-scope="scope">
                    <span :class="{ fire:scope.row.alrmCategory==1 ,break:scope.row.alrmCategory==0 }" style="color: #f5a623">{{scope.row.alrmType}}</span>
                </template>
            </el-table-column>
            <el-table-column label="报警时间">
                <template slot-scope="scope">
                    <span>{{scope.row.alrmDate}}</span>
                </template>
            </el-table-column>
             <el-table-column label="处理人" v-if="radioType==='fault'">
                <template slot-scope="scope">
                    <span>{{scope.row.handlePerson}}</span>
                </template>
            </el-table-column>
            <el-table-column label="处理时间" v-if="radioType==='fault'">
                <template slot-scope="scope">
                    <span>{{scope.row.handleDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="位置信息">
                <template slot-scope="scope">
                    <span class="img" @click="viewimg(scope.row.fireCockId)">查看</span>
                </template>
            </el-table-column>
            <el-table-column label="是否处理" fixed="right" v-if="radioType==='now'">
               <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleAlarm(scope.row)">处理
                </el-button>
                </template>
            </el-table-column>
<!--            <el-table-column label="" fixed="right" width="30">-->
<!--                <template slot-scope="scope">-->
<!--                    <span class="icon-nf-copy">-->
<!--                    <icon-svg icon-class="copy" style="fill:#dfdfdf"/>-->
<!--                    <em @click="handleCopy(scope.row.logId,$event)" class="icon-nf-copy-btn"></em>-->
<!--                    </span>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>
    </el-row>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.tag==0?total:totalbreak"> </el-pagination>
    </div>
  </div>
  <positionDialog :Show.sync="realtimePointShow" :id.sync="hydrantId"></positionDialog>
        <el-dialog title="处理确认"
        :visible.sync="isdelalram"
        :show-close='false'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        custom-class="xf-js-dialog" width="360px" height="160px">
          <div class="xf-js-deletect">
              <p>当前故障已确认吗？</p>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="handleSure">确定</el-button>
            <el-button type="text" @click="isdelalram=false">取消</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import clip from "@/utils/clipboard"; // use clipboard directly

import positionDialog from "@/views/device/realtimeMonit/components/outdoorPosition";
import {
  hydrantPageList,
  fireHydrantName,
  getfireHydrantMP,
  getEquipmentType,
  exAlrmtype,
  affirmHandle
} from "@/api/device/exceptionRecord/index";

export default {
  components: { positionDialog },
  data() {
    return {
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      alrmTypeList:[],
      hydrantId:'',
      visible2: false,
      tableKey: 0,
      isdelalram: false,
      realtimePointShow: false,
      switchalramtype: "1",
      measuringPoints:[],
      value1: "",
      value2: "",
      value3: "",
      radioType: "now",
      series: [],
      fireHydrantList: "",
      isadvance: false,
      list: [],
      devicelist: null,
      devicePoinsts: [],
      total: null,
      totalfire: null,
      totalbreak: null,
      listLoading: true,
      handleFlag:0,
      listQuery: {
        page: 1, // 当前页
        limit: 15, // 每页显示条数
        tag: 0,
        dateStrs: null,
        alrmType:'',
        bName: null, //建筑物
        hydrantName: null, // 消防栓名称
        measuringPoint: null, // 测点
        equipmentType: null, //系列
        sensorNo: null, //设备编号
        floorId: null, //楼层
        positionDescription: null, //位置
        confirPerson: null, //确认人
        handlePerson: null //处理人
      },
      buildImg: {
        buildingId: 1,
        floor: 8
      },
      count: "",
      form: {
        name: "",
        region: "",
        type: ""
      },
      formLabelAlign: {
        hydrantName: null, // 消防栓名称
        equipmentType: null, //  系列
        sensorNo: null, // 设变编号
        measuringPoint: null // 测点

      },
      advancerules: {},
      params: {
        channelId: ""
      },
      fireCockId: "",
      sensorNo: "",
      hydrantName: "",
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.params.channelId = vm.$route.params.id;
      vm.listQuery.dateStrs = null;
      vm.getList();
      vm.fireHydrantCount();
      vm.msQuery();
      vm.alrmType();
      vm.equipmentType();
    },
    handleCopy(text, event) {
      clip(text + "", event);
    },
    changeSwitch(val) {
      affirmHandle(val.id).then(res => {
        if (res.status === 200) {
          this.$notify({
            title: "成功",
            message: "处理成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },
    handleAlarm(row) {
      this.rowdata = row;
      this.isdelalram = true;
    },
    handleSure() {
      affirmHandle(this.$qs.stringify({ id: this.rowdata.id }))
        .then(res => {
          if (res.status === 200) {
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
            this.isdelalram = false;
            this.getList();
          }
        })
        .catch(res => {
          this.$notify({
            title: "提示",
            message: "网络异常！",
            type: "warning",
            duration: 2000
          });
          this.isdelalram = false;
        });
    },

    switchTable() {
      // 切换按钮时重置查询条件
      this.listQuery.dateStrs = null;
      this.listQuery.hydrantName = undefined;
      this.listQuery.equipmentType = undefined;
      this.listQuery.sensorNo = undefined;
      this.listQuery.measuringPoint = undefined;
      this.$refs["searchForm"].resetFields();
      if (this.radioType === "now") {
        this.listQuery.tag = 0;
        this.handleFlag = 0;
        this.listQuery.limit = 15;
        this.listQuery.page = 1;
        this.tableKey = 0;
        this.getList();
      }else {
        this.listQuery.tag = 2;
        this.handleFlag = 1;
        this.listQuery.limit = 15;
        this.listQuery.page = 1;
        this.tableKey = 2;
        this.getList();
      }
    },
    //获取表格所有的内容
    getList() {
      this.listLoading = true;
      let dateStrs;
      this.list = [];

      if (this.listQuery.dateStrs) {
        dateStrs = (this.listQuery.dateStrs).toString();
      }
      hydrantPageList(
        Object.assign({},this.listQuery, this.params, { dateStrs: dateStrs,handleFlag:this.handleFlag})
      ).then(response => {

        if (this.listQuery.tag == 0) {
          this.total = response.data.total;
          this.listLoading = false;
        }else {
          this.totalbreak = response.data.total;
          this.listLoading = false;
        }
        this.list = response.data.rows;
      });
    },
    //消防栓名称
    fireHydrantCount() {
      fireHydrantName(Object.assign({}, this.listQuery, this.params)).then(
        res => {
          this.fireHydrantList = res.data.hydrantrName;
        }
      );
    },
    msQuery(){
      getfireHydrantMP(Object.assign(this.params,{handleFlag:this.handleFlag})).then(res=>{
        this.measuringPoints = res.data;
      })
    },
    //系列
    equipmentType() {
      getEquipmentType(Object.assign({}, this.listQuery, this.params)).then(res => {
        this.series = res.data.equipmentType;
      });
    },
    //报警类型
    alrmType(){
      exAlrmtype().then(res=>{
        this.alrmTypeList = res.data;
      })
    },
    //根据时间查询
    handleFilter() {
      this.listQuery.hydrantName = undefined;
      this.listQuery.equipmentType = undefined;
      this.listQuery.sensorNo = undefined;
      this.listQuery.measuringPoint = undefined;
      this.resetForm('searchForm');
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    //高级查询里面的查询
    handleAdvaceSerach(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          if (this.formLabelAlign.hydrantName != "") {
            this.listQuery.hydrantName = this.formLabelAlign.hydrantName;
          } else {
            this.listQuery.hydrantName = undefined;
          }
          if (this.formLabelAlign.equipmentType != "") {
            this.listQuery.equipmentType = this.formLabelAlign.equipmentType;
          } else {
            this.listQuery.equipmentType = undefined;
          }
          if (this.formLabelAlign.sensorNo != "") {
            this.listQuery.sensorNo = this.formLabelAlign.sensorNo;
          } else {
            this.listQuery.sensorNo = undefined;
          }
          if (this.formLabelAlign.measuringPoint != "") {
            this.listQuery.measuringPoint = this.formLabelAlign.measuringPoint;
          } else {
            this.listQuery.measuringPoint = undefined;
          }

          this.isadvance = false;
          this.getList();
        }
      });
    },
    viewimg(val) {
      this.hydrantId = val;
      this.realtimePointShow = true;
    },
    //重置查询表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formLabelAlign.hydrantName = "";
      this.formLabelAlign.equipmentType = "";
      this.isadvance = false;
    },
    //表格的颜色
    tableRowClassName({ row, rowIndex }) {
      return "";
    }
  },
  watch: {
    $route: "fetchData"
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
.calendar-list-container {
  .icon-nf-copy {
    cursor: pointer;
    position: relative;
    .icon-nf-copy-btn {
      position: absolute;
      opacity: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  .filter-container {
    display: flex;
    justify-content: space-between;
    .title {
      color: rgb(129, 128, 128);
    }
  }
  .fire {
    color: #e4393c;
  }
  .break {
    color: #ffaf40;
  }
  .el-main {
    border-radius: 4px;
    overflow: hidden;
    ul {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      position: relative;
      display: flex;
      .right {
        color: #999;
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 10px;
      }
    }
    li {
      list-style: none;
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      span,
      p {
        display: inline-block;
      }
      .true-color {
        width: 17px;
        height: 14px;
        border-radius: 3px;
        background-color: #e4393c;
      }
      .false-color {
        width: 17px;
        height: 14px;
        border-radius: 3px;
        background-color: #1abc9c;
      }
      .fault-color {
        width: 17px;
        height: 14px;
        border-radius: 3px;
        background-color: #ffaf40;
      }
      h1 {
        margin: 0;
        font-size: 36px;
      }
      .table_pie {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-switch {
    height: 22px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table th {
    background: #f5f7fa;
  }
  .search {
    float: right;
  }
  .img {
    cursor: pointer;
  }
  .search {
    //   position: absolute;
    //   right: 0;
    //   top: 30px;
    float: right;
  }
}
</style>

